<template>
  <div class="page">
    <van-button @click="fn1">SET</van-button>
    <van-button @click="fn2">GET</van-button>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item" />
        <template #finished>
          <div>no more</div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import store2 from 'store2'

function fn1(){
  store2.session.set('token',{name:'张三'})
}
function fn2(){
  const value = store2.session.get('token')
  console.log('value',value);
  
}

const list = ref<number[]>([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = () => {
    console.log('OnLoad');
    //异步更新数据
    //setTimeout 仅做示例，真实场景中一般为ajax请求
      setTimeout(() => {
        //当下拉时，相将数据清空
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };
const onRefresh = () => {
    console.log('onRefresh');
    
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();   
}

</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  background-color: honeydew;
  overflow: auto;
}
</style>
